<template>
	<view class="msg-item-box flex j-c-b" @click="goToInfo">
		<view class="left flex a-i-c">
			<view class="image all-center" :class="'bgcolor'+iconType">
				<image class="icon" :src="'/static/images/msg/like-msg-icon'+iconType+'.svg'" mode=""></image>
			</view>
			<view class="msg-item-type-box" :style="{width:iconType === '3'?'250rpx':'auto'}">
				<view class="text1 f-s-28 f-w-b">
					<block  v-if="iconType === '1'">
						{{item.data.title||""}}
					</block>
					<block v-if="iconType === '2'">
						{{item.data.title||""}}
					</block>
					<block v-if="iconType === '3'">
						{{item.data.title||""}}
					</block>
					<text class="f-s-22 color-999" style="margin-left: 20rpx;white-space: nowrap;">
						{{item.is_read === 0?'未读':''}}
					</text>
				</view> 
				<view class="color-979797 f-s-24 l-h-34">
					{{item.data.content||""}}
				</view>
			</view>
		</view>
		<view class="flex">
			<text class="right color-2567F3 f-s-24 all-center" style="white-space: nowrap;">
				{{getTime()}}
			</text>
		</view>
		
		
	</view>
</template>

<script>
	import {goTo} from "@/nav.js"
	export default {
		name:"msgBox",
		props:{
			item:{
				type:Object,
				default(){
					return {}
				}
			},
			iconType:{
				type:String,
				default:"1"
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			goToInfo(){
				console.log(this.item.id,"this.item.id")
				this.$readyMsg(this.item.id)
				goTo({url:this.item.data.path})
			},
			getTime(){
				let date = new Date(this.item.createtime*1000)
				let yyyy = date.getFullYear()
				let MMMM =  date.getMonth()+1<10?`0${date.getMonth()+1}`:date.getMonth()+1
				let dd = date.getDate()<10?`0${date.getDate()}`:date.getDate()
				let hh = date.getHours()<10?`0${date.getHours()}`:date.getHours()
				let mm = date.getMinutes()<10?`0${date.getMinutes()}`:date.getMinutes()
				return  `${yyyy}-${MMMM}-${dd} ${hh}:${mm}`
			},
		}
	}
</script>

<style lang="scss" scoped>
	.msg-item-box{
		width: 100%;
		padding: 16upx 58upx 16upx 30upx;
		background: rgba(255, 255, 255, 0.01);
		border-bottom: 1upx solid #F1F1F1;
		margin-bottom: 16upx;
		.right{
			padding: 2upx 16upx;
			background: #F1F5FE;
			height: 38upx;
			border-radius: 80upx;
		}
		.left{
			.msg-item-type-box{
				.text1{
					line-height: 40upx;
					margin-bottom: 16upx;
				}
			}
			.image{
				width: 96upx;
				height: 96upx;
				margin-right: 48upx;
				border-radius: 50%;
				.icon{
					width: 50upx;
					height: 50upx;
				}
			}
			.bgcolor1{
				background: #FFF7F7;
			}
			.bgcolor2{
				background: #F1F7FF;
			}
			.bgcolor3{
				background: #FFF3E3;
			}
		}
	}
</style>